 <template>
   <!--
      使用说明：
        1、搜索模块之间的上下间距  通过class类名为 searchBoxList 控制，改变其 margin-top 属性来改变上下间距，默认为10px
        2、搜索框前面的文字描述最多为4个字符
        3、el-col 栅格配置 ≥768px 一行放4个(:xl="4")  ≥1200px 一行放6个(:sm="6")
           在不同分辨率下改变sm、xl的数值即可达到每一行放的个数
   -->
   <!--搜索群组 begin-->
  <div style="padding: 10px 15px;" class="overflowY">
    <div class="searchGroup_list" style="padding:0px 0px 0px 0px;margin:0px 0px 0px 0px;">
      <el-row :gutter="20">
        <el-col :sm="6" :xl="4">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="6">
                <span class="searchListName">项目编号: </span>
              </el-col>
              <el-col :span="18">
                <el-input size="small" v-model="input1" placeholder="请输入项目编号"></el-input>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :sm="6" :xl="4">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="6">
                <span class="searchListName">项目名称: </span>
              </el-col>
              <el-col :span="18">
                <el-input size="small" @focus="changeSearchListName" v-model="input2" placeholder="请选择" suffix-icon="el-icon-search"></el-input>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :sm="6" :xl="4">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="6">
                <span class="searchListName">立项人: </span>
              </el-col>
              <el-col :span="18">
                <el-input size="small" v-model="input3" placeholder="请选择" suffix-icon="el-icon-search"></el-input>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :sm="6" :xl="4">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="6">
                <span class="searchListName">跟踪人: </span>
              </el-col>
              <el-col :span="18">
                <el-input size="small" v-model="input4" placeholder="请选择" suffix-icon="el-icon-search"></el-input>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :sm="6" :xl="4">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="6">
                <span class="searchListName">开始日期: </span>
              </el-col>
              <el-col :span="18">
                <div class="searchTime" style="width: 100%">
                  <el-date-picker
                    @change="changeData"
                    size="small"
                    v-model="input5"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :sm="6" :xl="4">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="6">
                <span class="searchListName">结束日期: </span>
              </el-col>
              <el-col :span="18">
                <div class="searchTime" style="width: 100%">
                  <el-date-picker
                    size="small"
                    v-model="input6"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :sm="6" :xl="4">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="6">
                <span class="searchListName">项目类型: </span>
              </el-col>
              <el-col :span="18">
                <el-select v-model="input7" placeholder="请选择" size="small">
                  <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :sm="6" :xl="4">
          <div style="display: inline-block;text-align: left;width: 100%;padding-top: 11px;">
            <el-button type="primary" size="mini">搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <base-card title="说明">
      <code>
        <span style="width: 100%;display: inline-block;">1、搜索模块之间的上下间距，通过class类名为searchBoxList控制，改变其margin-top来改变上下间距，默认为10</span>
        <span style="width: 100%;display: inline-block;">2、搜索框前面的文字描述最多为4个字符</span>
        <span style="width: 100%;display: inline-block;">3、最外层 div 上的margin、padding控制div的外边距和内边距，四个值分别为上、右、下、左</span>
        <span style="width: 100%;display: inline-block;">4、使用clearable属性即可得到一个可清空的输入框</span>
        <span style="width: 100%;display: inline-block;">
          5、可清空的输入框，在清空之后会出现绑定的值为 null
          <p style="margin-left: 20px;">可在输入框上添加change事件，在事件中判断 如果值 === null 则重新赋值成你需要的结果</p>
        </span>
      </code>
    </base-card>
    <base-card title="HTML">
      <pre><code><p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="searchGroup_list" style="padding:0px 0px 0px 0px;margin:0px 0px 0px 0px;"&gt;<br>      &lt;el-row :gutter="20"&gt;<br>        &lt;el-col :sm="6" :xl="4"&gt;<br>          &lt;div class="searchBoxList"&gt;<br>            &lt;el-row&gt;<br>              &lt;el-col :span="6"&gt;<br>                &lt;span class="searchListName"&gt;项目编号: &lt;/span&gt;<br>              &lt;/el-col&gt;<br>              &lt;el-col :span="18"&gt;<br>                &lt;el-input size="small" v-model="input1" placeholder="请输入项目编号"&gt;&lt;/el-input&gt;<br>              &lt;/el-col&gt;<br>            &lt;/el-row&gt;<br>          &lt;/div&gt;<br>        &lt;/el-col&gt;<br>        &lt;el-col :sm="6" :xl="4"&gt;<br>          &lt;div class="searchBoxList"&gt;<br>            &lt;el-row&gt;<br>              &lt;el-col :span="6"&gt;<br>                &lt;span class="searchListName"&gt;项目名称: &lt;/span&gt;<br>              &lt;/el-col&gt;<br>              &lt;el-col :span="18"&gt;<br>                &lt;el-input size="small" @focus="changeSearchListName" v-model="input2" placeholder="请选择" suffix-icon="el-icon-search"&gt;&lt;/el-input&gt;<br>              &lt;/el-col&gt;<br>            &lt;/el-row&gt;<br>          &lt;/div&gt;<br>        &lt;/el-col&gt;<br>        &lt;el-col :sm="6" :xl="4"&gt;<br>          &lt;div class="searchBoxList"&gt;<br>            &lt;el-row&gt;<br>              &lt;el-col :span="6"&gt;<br>                &lt;span class="searchListName"&gt;立项人: &lt;/span&gt;<br>              &lt;/el-col&gt;<br>              &lt;el-col :span="18"&gt;<br>                &lt;el-input size="small" v-model="input3" placeholder="请选择" suffix-icon="el-icon-search"&gt;&lt;/el-input&gt;<br>              &lt;/el-col&gt;<br>            &lt;/el-row&gt;<br>          &lt;/div&gt;<br>        &lt;/el-col&gt;<br>        &lt;el-col :sm="6" :xl="4"&gt;<br>          &lt;div class="searchBoxList"&gt;<br>            &lt;el-row&gt;<br>              &lt;el-col :span="6"&gt;<br>                &lt;span class="searchListName"&gt;跟踪人: &lt;/span&gt;<br>              &lt;/el-col&gt;<br>              &lt;el-col :span="18"&gt;<br>                &lt;el-input size="small" v-model="input4" placeholder="请选择" suffix-icon="el-icon-search"&gt;&lt;/el-input&gt;<br>              &lt;/el-col&gt;<br>            &lt;/el-row&gt;<br>          &lt;/div&gt;<br>        &lt;/el-col&gt;<br>        &lt;el-col :sm="6" :xl="4"&gt;<br>          &lt;div class="searchBoxList"&gt;<br>            &lt;el-row&gt;<br>              &lt;el-col :span="6"&gt;<br>                &lt;span class="searchListName"&gt;开始日期: &lt;/span&gt;<br>              &lt;/el-col&gt;<br>              &lt;el-col :span="18"&gt;<br>                &lt;div class="searchTime" style="width: 100%"&gt;<br>                  &lt;el-date-picker<br>                    size="small"<br>                    v-model="input5"<br>                    type="date"<br>                    placeholder="选择日期"&gt;<br>                  &lt;/el-date-picker&gt;<br>                &lt;/div&gt;<br>              &lt;/el-col&gt;<br>            &lt;/el-row&gt;<br>          &lt;/div&gt;<br>        &lt;/el-col&gt;<br>        &lt;el-col :sm="6" :xl="4"&gt;<br>          &lt;div class="searchBoxList"&gt;<br>            &lt;el-row&gt;<br>              &lt;el-col :span="6"&gt;<br>                &lt;span class="searchListName"&gt;结束日期: &lt;/span&gt;<br>              &lt;/el-col&gt;<br>              &lt;el-col :span="18"&gt;<br>                &lt;div class="searchTime" style="width: 100%"&gt;<br>                  &lt;el-date-picker<br>                    size="small"<br>                    v-model="input6"<br>                    type="date"<br>                    placeholder="选择日期"&gt;<br>                  &lt;/el-date-picker&gt;<br>                &lt;/div&gt;<br>              &lt;/el-col&gt;<br>            &lt;/el-row&gt;<br>          &lt;/div&gt;<br>        &lt;/el-col&gt;<br>        &lt;el-col :sm="6" :xl="4"&gt;<br>          &lt;div class="searchBoxList"&gt;<br>            &lt;el-row&gt;<br>              &lt;el-col :span="6"&gt;<br>                &lt;span class="searchListName"&gt;项目类型: &lt;/span&gt;<br>              &lt;/el-col&gt;<br>              &lt;el-col :span="18"&gt;<br>                &lt;el-select v-model="input7" placeholder="请选择" size="small"&gt;<br>                  &lt;el-option<br>                    v-for="item in options1"<br>                    :key="item.value"<br>                    :label="item.label"<br>                    :value="item.value"&gt;<br>                  &lt;/el-option&gt;<br>                &lt;/el-select&gt;<br>              &lt;/el-col&gt;<br>            &lt;/el-row&gt;<br>          &lt;/div&gt;<br>        &lt;/el-col&gt;<br>        &lt;el-col :sm="6" :xl="4"&gt;<br>          &lt;div style="display: inline-block;text-align: left;width: 100%;padding-top: 11px;"&gt;<br>            &lt;el-button type="primary" size="mini"&gt;搜索&lt;/el-button&gt;<br>          &lt;/div&gt;<br>        &lt;/el-col&gt;<br>      &lt;/el-row&gt;<br>    &lt;/div&gt;</p></code></pre>
    </base-card>
    <base-card title="JS">
      <pre><code><pre><code>export default {<br>  name: 'searchGroup',<br>  data() {<br>    return {<br>      input1: '',<br>      input2: '',<br>      input3: '',<br>      input4: '',<br>      input5: '',<br>      input6: '',<br>      input7: '',<br>      input8: '',<br>      options1: [{<br>        value: '0',<br>        label: '项目类型1'<br>      }, {<br>        value: '1',<br>        label: '项目类型2'<br>      }, {<br>        value: '2',<br>        label: '项目类型3'<br>      }],<br>      options2: [{<br>        value: '0',<br>        label: '开始'<br>      }, {<br>        value: '1',<br>        label: '未开始'<br>      }]<br>    }<br>  },<br>  methods: {<br>    changeSearchListName() {<br>      this.dialogTableVisible = true<br>    }<br>  }<br>}</code></pre><p><br></p></code></pre>
    </base-card>
    <base-card title="CSS">
      <pre><code><pre><code><pre><code>&lt;style scoped&gt;<br>  .searchBoxList{<br>    margin-top: 10px;<br>  }<br>  .searchGroup_list .searchListName{<br>    font-size: 14px;<br>    color: #333333;<br>    display: inline-block;<br>    vertical-align: middle;<br>    line-height: 32px;<br>  }<br>  .searchTime{<br>    width: 100%;<br>  }<br>  .searchTime &gt; div{<br>    width: 100%;<br>  }<br>&lt;/style&gt;</code></pre><p><br></p></code></pre></code></pre>
    </base-card>
    <div style="margin-top: 50px;">
      <el-date-picker
        v-model="relationTimeChange"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <base-card title="说明">
        <code>
          <span style="width: 100%;display: inline-block;">1、value-format="yyyyMMddHHmmss" 设置日期格式</span>
        </code>
      </base-card>
      <base-card title="HTML">
        <pre><code>      &lt;el-date-picker<br>        v-model="relationTimeChange"<br>        type="daterange"<br>        range-separator="-"<br>        start-placeholder="开始日期"<br>        end-placeholder="结束日期"&gt;<br>      &lt;/el-date-picker&gt;</code></pre>
      </base-card>
      <base-card title="JS">
        <pre><code>export default {<br>  data() {<br>    return {<br>      relationTimeChange: ''<br>    }<br>  }<br>}</code></pre>
      </base-card>
    </div>
  </div>
   <!--搜索群组 end-->
</template>

<script>
import BaseCard from '@/components/BaseCard/BaseCard'
export default {
  name: 'searchGroup',
  data() {
    return {
      relationTimeChange: '',
      input1: '',
      input2: '',
      input3: '',
      input4: '',
      input5: '',
      input6: '',
      input7: '',
      input8: '',
      options1: [{
        value: '0',
        label: '项目类型1'
      }, {
        value: '1',
        label: '项目类型2'
      }, {
        value: '2',
        label: '项目类型3'
      }],
      options2: [{
        value: '0',
        label: '开始'
      }, {
        value: '1',
        label: '未开始'
      }]
    }
  },
  components: {
    BaseCard
  },
  methods: {
    changeData() {
      console.log(this.input5)
      if (this.input5 === null) {
        this.input5 = ''
      }
      console.log(this.input5)
    },
    changeSearchListName() {
      this.dialogTableVisible = true
    }
  }
}
</script>
<style scoped>
  .searchBoxList{
    margin-top: 10px;
  }
  .searchGroup_list .searchListName{
    font-size: 14px;
    color: #333333;
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
  }
  .searchTime{
    width: 100%;
  }
  .searchTime > div{
    width: 100%;
  }
</style>

